<template>
    <el-dialog v-model="showDialog" modal-class="add-folder-modal" title="选择附件" @closed="handlerCancel" width="500px" center close-on-click-modal>
        <el-form label-width="120px">
          <el-form-item label="附件">
            <el-select placeholder="请选择" v-model="attchment">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.fileName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
            <el-button size="small" @click="handlerCancel">取消</el-button>
            <el-button size="small" type="primary" @click="handlerSave">
                确定
            </el-button>
            </div>
        </template>
    </el-dialog>
  </template>
    
  <script lang="ts" setup>
  import { ElMessage } from 'element-plus';
import { defineProps, ref } from 'vue';

  const props = defineProps({
    list: {
      type: Object,
      default: [],
    }
  });

  const attchment = ref(null);
  const showDialog = ref(false);
  
  const emit = defineEmits(['close', 'submit']);

  const handlerCancel = () => {
    emit('close');
  };
  
  const handlerSave = async () => {
    if (!attchment.value) {
      ElMessage.warning('请选择一个附件');
      return;
    }
    const file = props.list.find((item: any) => item.id === attchment.value);
    emit('submit', file);
  };
  
  defineExpose({
    showDialog
  })
  </script>
  <style lang="scss" scoped>
  </style>
    